<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-top-subData>
				<div class="number">
					<div class="money base-flex">
						<div class="money-li" v-for="(item, index) in list" :key="index">
							<div class="title">
								{{ item.value }}
							</div>
							<div class="num">{{ item.num || 0 }}</div>
						</div>
					</div>
				</div>
			</template>
			<template #slot-viewType>
				<date-picker
					style="margin:0 10px"
					@change="val => crud.refresh({ startTime: val[0], endTime: val[1], page: 1 })"
					@refresh="crud.refresh({ startTime: '', endTime: '', page: 1 })"
				></date-picker>
			</template>
			<template #table-column-date="{scope}">
				{{ scope.row.date | dateFormatLine2 }}
			</template>
			<template #table-column-type1="{scope}">
				{{ selectType(scope.row.data, 1) }}
			</template>
			<template #table-column-type2="{scope}">
				{{ selectType(scope.row.data, 2) }}
			</template>
			<template #table-column-type3="{scope}">
				{{ selectType(scope.row.data, 4) }}
			</template>
		</cl-crud>
	</div>
</template>

<script>
import DatePicker from '@/components/common/date-picker';

export default {
	data() {
		return {
			list: [
				{
					value: '超级红包复制点击数',
					num: ''
				},
				{
					value: '百亿补贴红包立即领取点击数',
					num: ''
				},
				{
					value: '返回按钮点击数',
					num: ''
				}
			]
		};
	},
	components: {
		DatePicker
	},
	mounted() {},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.redEnvelopeRainConfig.red)
				.set('dict', {
					api: {
						page: 'clickDataPage'
					}
				})
				.set('table', {
					columns: [
						{
							label: '日期',
							prop: 'date',
							align: 'center'
						},
						{
							label: '超级红包复制点击数',
							prop: 'type1',
							align: 'center'
						},
						{
							label: '百亿补贴红包立即领取点击数',
							prop: 'type2',
							align: 'center'
						},
						{
							label: '返回按钮点击数',
							prop: 'type3',
							align: 'center'
						}
					],

					op: {
						visible: false
					}
				})

				.set('layout', [
					['slot-top-subData'],
					['refresh-btn', 'slot-viewType', 'flex1', 'slot-filter'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					const { subData } = await next(params);
					if (subData.length > 0) {
						subData.map(i => {
							if (i.type == 1) {
								this.list[0].num = i.num;
							}
							if (i.type == 2) {
								this.list[1].num = i.num;
							}
							if (i.type == 4) {
								this.list[3].num = i.num;
							}
						});
					}
				})
				.done();

			app.refresh();
		},
		selectType(list, type) {
			let s;
			list.map(i => {
				if (i.type == type) {
					return (s = i.num);
				}
			});
			return s;
		}
	}
};
</script>
<style lang="scss" scoped>
.number {
	width: 100%;
	background: #ffffff;
	padding: 20px;
	border-radius: 8px;
	.money {
		display: flex;
		justify-content: space-around;
		.money-li {
			position: relative;
			.money-li-child {
				.num {
					color: $main-light;
					font-size: $font16;
					margin-top: 5px;
				}
				margin-top: 18px;
			}
			.money-li-child div:first-child {
				margin-right: 30px;
			}
			.title {
				color: $text-grey;
				font-size: $font12;
				display: flex;
				align-items: center;
				.money-li__icon {
					margin-left: 10px;
					font-size: 16px;
				}
			}
			.num {
				color: $main-light;
				font-size: $font22;
				font-weight: bold;
				margin-top: 6px;
				text-align: center;
			}
		}
	}
}
</style>
